<template>
  <div>
    <div class="header-fixed">
      <Header :text="text"/>
    </div>
    <div class="content">
      <!--
      <el-button plain class="btn" @click="handle"><van-icon name="scan" style="font-size: 20px" /><span style="margin-left:5px">{{$t('btn.scan')}}</span></el-button>
      -->
      <el-button plain class="btn" @click="handleHand"><i class="el-icon-edit"></i><span>{{$t('btn.handleEntry')}}</span></el-button>
    </div>
    <!-- 手动输入 -->
    <van-dialog v-if="show" v-model="show" :title="`${$t('m.please')+$t('cExport.shipping')}`" :beforeClose="handleConfirm" show-cancel-button>
      <el-input :placeholder="`${$t('m.please')+$t('cExport.shipping')}`" style="padding:10px" v-model="shipmentInput"/>
    </van-dialog>
    <!-- 分运单详情 -->
    <SignDetail v-if="isShow" :signObj="signObj" @handleCancel="handleCancel"/>
  </div>
</template>

<script>
import Header from '../../components/common/Header'
import SignDetail from './components/SignDetail'
import { $export } from "@/api/export"
import { Notify } from 'vant'
export default {
  components: {
    [Notify.Component.name]: Notify.Component,
    Header,
    SignDetail
  },
  data() {
    return {
      text: '',
      show: false,
      isShow: false,
      signObj: {}, // 签收对象
      shipmentInput: '' // 分运单号
    }
  },
  methods: {
    handleHand() {
      this.show = !this.show
    },
    // 点击确认分运单号
    handleConfirm(action,done) {
      if (action === 'confirm') {
        if (this.shipmentInput === '') {
          done()
          this.show = false
          this.shipmentInput = ''
          return Notify(this.$t('message.signNo'))
        }
        else {
          const obj = {
            waybillNumber: this.shipmentInput
          }
          this.getDetail(obj,done)
        }
      } else {
        done()
      }
    },
    // 关闭详情
    handleCancel() {
      this.isShow = false
    },
    // 扫描
    handle() {
      var FNScanner = api.require('FNScanner')
      FNScanner.openScanner({
        autoration: true
      },(ret, err) => {
        // 扫描成功
        if (ret.eventType == 'success') {
          const obj = JSON.parse(ret.content)
          const newObj = {
            waybillNumber: obj.waybillNumber
          }
          if (newObj && newObj.waybillNumber) {
            this.getDetail(newObj)
          }
          else {
            return this.$msg.fail(this.$t('message.noScan'))
          }
        }
        else {
          console.log(err)
        }
      })
    },
    // 请求分运单号详情
    getDetail(obj,done) {
      $export.signDetails(obj)
          .then(res => {
            if (res.status === 200) {
              this.signObj = res.data
              this.isShow = true
            }
            else {
              this.$msg.fail(res.msg || res.message || this.$t('message.noTry'))
            }
          })
          .catch(err => this.$msg.fail(err.msg || err.message || this.$t('message.noTry')))
          .finally(() => {
            done ? done() : ''
            this.shipmentInput = ''
          })
    }
  },
  created() {
    this.text = this.$t(this.$route.query.type)
  }
}
</script>

<style scoped>
.content {
  position: fixed;
  display: flex;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
/deep/.el-button span{
  display: flex;
  justify-content: center;
  align-items: center;
}
/deep/.el-button {
  margin: 10px 0;
}
/deep/.el-input {
  box-sizing: border-box;
}
</style>
